<template>
  <Skeleton v-if="SkeletonShow"></Skeleton>
  <div v-else class="boxxx">
    <image
      mode="widthFix"
      src="https://qita-1252107261.cos.ap-chengdu.myqcloud.com/yiliao/gongjinai.jpg"
    ></image>
    <view class="tabTitle">
      <view
        class="tabItem"
        @click="tabChange(item.name, item._id)"
        v-for="(item, index) in hpvSelect"
        :key="item._id"
      >
        <text> {{ item.name }}</text>
        <view class="tag" :class="{ tagColor: tabInfo == item.name }"></view>
      </view>
    </view>
    <view class="tabList">
      <view class="item" v-for="(item, index) in hpvList" :key="item._id">
        <view class="left">
          <text class="title">{{ item.name }}</text>
          <view class="list">
            <view class="list-item" v-for="(o, i) in item.describe" :key="i">{{
              o
            }}</view>
          </view>
          <text class="price">￥{{ item.price[0] }}-￥{{ item.price[1] }}</text>
        </view>
        <view class="right">
          <button @click="goDetail(item)">去预约</button>
        </view>
      </view>
    </view>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { api } from "../../api/api";
import Skeleton from "@/Skeleton/Skeleton-hpv.vue";
import type { HpvListT, HpvSelectT } from "../../types/type";
const hpvSelect = ref<HpvSelectT[]>([]);
const hpvList = ref<HpvListT[]>([]);
const allList = ref();
const SkeletonShow = ref<boolean>(true);
const getList = async () => {
  const res: any = await api.otuhpv();
  console.log(res);
  hpvList.value = res.data[0].hpv_list;
  hpvSelect.value = res.data[0].hpv_select;
  allList.value = res.data;
  SkeletonShow.value = false;
};
onMounted(() => {
  getList();
});
const tabInfo = ref<string>("全部");
const tabChange = (name: string, _id: string) => {
  tabInfo.value = name;
  hpvList.value = allList.value[0].hpv_list;
  let res = hpvList.value.filter((item) => item.hpv_id == _id);
  if (name != "全部") {
    hpvList.value = res;
  }
};
const goDetail = (item: object) => {
  const token = uni.getStorageSync("token");
  if (token) {
    uni.setStorageSync("hpvDetail", item);
    uni.navigateTo({
      url: "/navPage/hpvDetail/hpvDetail",
    });
  } else {
    uni.navigateTo({
      url: "/pages/login/login",
    });
  }
};
</script>

<style lang="scss" scoped>
image {
  width: 100%;
}
.tabTitle {
  display: flex;
  align-items: center;
  .tabItem {
    width: 25%;
    text-align: center;
    height: 80rpx;
    line-height: 80rpx;
  }
  .tag {
    width: 60rpx;
    height: 10rpx;
    background-color: #007aff;
    border-radius: 20rpx;
    margin: 0 auto;
    display: none;
  }
  .tabItem .tagColor {
    display: block;
  }
}
.tabList {
  padding: 0 30rpx;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  background-color: #f7f7f7;
  .item {
    width: 100%;
    background-color: #fff;
    padding: 30rpx;
    box-sizing: border-box;
    margin: 20rpx 0;
    border-radius: 15rpx;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    .right {
      button {
        background-color: #007aff;
        color: #fff;
        border-radius: 30rpx;
        border: none;
      }
    }
    .title {
      font-weight: 600;
      font-size: 35rpx;
    }
    .list {
      display: flex;
      align-items: center;
      margin: 10rpx;
      .list-item {
        padding: 10rpx;
        background-color: #f7f7f7;
        margin-right: 10rpx;
        border-radius: 10rpx;
      }
    }
    .price {
      font-weight: 600;
      font-size: 30rpx;
      color: #f00;
    }
  }
}
</style>
